import { ListItemLayout } from './type';
import './list.scss';
import React from 'react';

export interface ListProps {
	list?: any[];
	className?: string;
	itemLayout?: `${ListItemLayout}`;
	header?: React.ReactNode;
	footer?: React.ReactNode;
	bordered?: boolean;
	children?: React.ReactNode;
	renderItem?: (item?: any, index?: number) => React.ReactNode;
	loading?: boolean;
}

const List = (props: ListProps) => {
	const {
		list = [],
		className = '',
		itemLayout = 'vertical',
		header,
		footer,
		// bordered = false,
		children,
		renderItem = () => <></>,
		loading = false,
	} = props;

	const loadingContent = <div className="hs-ui-list_loading">加载中...</div>;
	const emptyContent = <div className="hs-ui-list_no-data">暂无数据</div>;
	const content = list.map((item: any, index: number) => renderItem(item, index));
	const childrenContent = loading
		? loadingContent
		: !children && list && list.length > 0
		? content
		: emptyContent;
	return (
		<div className={`hs-ui-list ${className}`}>
			{header && <div className="hs-ui-list_header">{header}</div>}
			<div className={`hs-ui-list_wrapper hs-ui-list_wrapper-${itemLayout ?? 'horizontal'}`}>
				{childrenContent}
				{children}
			</div>
			{footer && <div className="hs-ui-list_footer">{footer}</div>}
		</div>
	);
};

export default List;
